@import '../../../assets/css/base/flex.scss';
@import '../../../assets/css/base/other.scss';

//  受理，审理查询列表页面样式： 页面title和操作栏样式
.accept_main {
  padding: 0px;
  background-color: #F8FAFD;
  &_tip {
    display: flex;
    // display: inline-block;
    width: 100%;
    padding: 12px 10px;

    &_label_div {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      width: 180px;
      margin-left: 20px;
    }

    &_label_span {
      font-size: 24px;
      font-family: "PingFang-SC-Heavy";
      font-weight: 800;
      color: #2C2C2C;
      // width: 150px;
      display: inline-block;
      text-align-last: justify;
    }

    &_label_circle {
      width: 22px;
      height: 22px;
      background: #CA0000;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-left: 5px;

      >p {
        margin-bottom: 0px;
      }
    }

    &_label_circle_content {
      text-align: center;
      font-size: 14px;
      font-weight: 800;
      color: #ffffff;
      font-family: "PingFang-SC-Heavy";
    }
  }

  &_content {
   
    margin: 0px;
    width: 100%;
    // height: 600px;
    min-height: 600px;
    background: #FFFFFF;
    border: 1px solid #EFEFEF;
    border-radius: 10px;

    &_operate {
      margin: 24px 24px;
      width: 100%;
      height: 60px;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 10px;

      &_left {
        display: block;
        // margin-left: 20px;
        width: 45%;
        height: inherit;
        margin-right: auto;
        display: flex;
        

        &_icon {
          width: 80px;
          display: flex;
          justify-content: center;
          align-items: center;

          &_table {
            width: 40px;
            height: 40px;
            border: 1px solid #E6E6E6;
            border-radius: 5px 5px 5px 5px;

          }

          &_card {
            width: 40px;
            height: 40px;
            border: 1px solid #E6E6E6;
            border-radius: 5px 5px 5px 5px;

          }

          &_img {
            margin-top: 10px;
            margin-left: 10px;

          }

          &_active {
            background: #E6E6E6;
          }

        }

        &_search {
          // margin-left: 60px;
          display: flex;
          justify-content: center;
          align-items: center;

          &_icon {
            .ant-input-prefix {
              left: 8px;
            }
            font-size: 16px
          }

          &_customer {
            width: 240px;

            .ant-input {
              // background: #F6F6F6;
              // padding-left: 40px !important;
            }
          }

          &_more {
            width: 40px;
            height: 40px;
            border: 1px solid #E6E6E6;
            border-radius: 5px 5px 5px 5px;
            margin-left: 20px;
            position: relative;
          }


          &_more_active {
            width: 40px;
            height: 40px;
            border: 1px solid #E6E6E6;
            border-radius: 5px 5px 5px 5px;
            background: #E6E6E6;
            margin-left: 20px;
          }

          &_more_active:after {
            content: "";
            position: absolute;
            top: 120%;
            right: 8px;
            border-width: 10px;
            border-style: solid;
            border-color: transparent transparent #EEEEEE transparent;
            -webkit-transform: translateY(-40%);
            transform: translateY(-40%);
            z-index: 1;
          }
          &_more_active:before {
            content: "";
            position: absolute;
            top: 124%;
            right: 8px;
            border-width: 10px;
            border-style: solid;
            border-color: transparent transparent #FFFFFF transparent;
            -webkit-transform: translateY(-40%);
            transform: translateY(-40%);
            z-index: 2;
          }
        }
      }

      &_right {
        display: block;
        float: right;
        margin-right: 40px;
        width: 80px;
        height: 40px;
        border: 1px solid #E6E6E6;
        border-radius: 5px;

        &_divline {
          width: 1px;
          height: 40px;
          border: 1px solid #E6E6E6;
        }

        .headerdefBox img {
          height: 20px;
          width: 20px;
          margin-right: auto;
          margin-left: 10px;
        }

        .headerdefBox {
          // border: 1px solid red;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
            
    }

    &_table {
      width: 100%;
      // min-height: 500px;
      // overflow: auto;
    }

    &_divider {
        width: 100%;
        border-top: 1px solid #EFEFEF;
        display: block;
        margin-left: -24px;
        position: absolute;
    }
  }

  

}


//  受理，审理查询列表页面样式： 页面table内容
.accept_content {

  &_card {
      height: inherit;
      width: 100%;

      &_box {
          width: 100%;
          display: flex;
          flex-wrap: wrap;
          justify-content: flex-start;
          align-items: center;
          margin-bottom: 20px;
          &_signle {
              // width: 330px;
              // height: 250px;
              background: #FFFFFF;
              border: 1px solid #EFEFEF;
              border-radius: 10px;
              flex: 1;
              margin: 20px 10px 0px 10px;
              background-color: #FFFFFF;
              width: calc((100% - 100px) / 4);// 这里的10px = (分布个数3-1)*间隙5px, 可以根据实际的分布个数和间隙区调整
              min-width: calc((100% - 100px) / 4);// 加入min-width、max-width后每个child的宽度就生效了
              max-width: calc((100% - 100px) / 4);
              &_status_light_success {
                  width: 100%;
                  height: 15px;
                  background-color: #0072C6;
                  border-top-left-radius: 15px;
                  border-top-right-radius: 15px;

              }
              &_status_light_error {
                  width: 100%;
                  height: 15px;
                  background-color: #CA0000;
                  border-top-left-radius: 15px;
                  border-top-right-radius: 15px;

              }

          }

          .accept_content_card_box_signle:nth-child(4n + 1){
              margin-left: 20px;// 去除第4n个的margin-right
          }
          .accept_content_card_box_signle:nth-child(4n){
              margin-right: 20px;// 去除第4n个的margin-right
          }

          &_info {
              &_label {
                  width:100%;
                  height: 50px;
                  display: flex;
                  flex-wrap: wrap;
                  justify-content: center;
                  align-items: center;    

                  &_left_title {
                      font-size: 18px;
                      font-family: "PingFang-SC-Heavy";
                      font-weight: 400;
                      color: #2C2C2C;
                      margin-right: auto;
                      margin-left: 15px;
                      width: 55%;
                  }
                  &_right_title {
                      font-size: 16px;
                      font-family: "PingFang-SC-Heavy";
                      font-weight: 400;
                      color: #666666;
                      margin-right: auto;
                      // margin-left: 30%;
                      // display: inline-block;
                      float: right;
                      margin-right: 20px;
                      /* width: 92%; */
                      margin-left: auto;
                  }
              }

              &_content {
                  width: 100%;
                  height: 180px;
                  margin: 15px 0px;
                  padding: 0px 10px;
                  overflow: auto;
                  &_background {
                      background: #F7F9FC;
                      border-radius: 8px;
                      width: 100%;
                      // height: inherit;
                  }

                  &_div {
                      width: 100%;
                      height: 36px;
                      &_left {
                          font-size: 16px;
                          font-family: "PingFang-SC-Heavy";
                          font-weight: 400;
                          color: #666666;
                          margin-left: 15px;
                          width: 30%;
                          display: inline-block;
                          overflow: hidden;
                          white-space: nowrap;
                          text-overflow: ellipsis;
                          text-align: left;
                          margin: 6px 0px;
                          text-align: left;
                      }
                      &_right {
                          font-size: 16px;
                          font-family: "PingFang-SC-Heavy";
                          font-weight: 400;
                          color: #2C2C2C;
                          margin-left: auto;
                          margin-right: 15px;
                          width: 65%;
                          display: inline-block;
                          overflow: hidden;
                          white-space: nowrap;
                          text-overflow: ellipsis;
                          margin: 6px 5px;
                          text-align: right;
                      }

                  }
                  
              }

          }
      }

  }


  &_table {

    &_font_red {
      color: #ca0000;
      font-size: 16px;
      font-family: 'PingFang-SC-Heavy';
      font-weight: 400;
    }



  }


  &_page {
    &_controller {
        display: flex;
        flex-wrap: wrap;
        justify-content: right;
        align-items: center;

        &_total {
            font-size: 16px;
            font-family: "PingFang-SC-Heavy";
            font-weight: 400;
            color: #8E97B9;
            float: right;
            margin-right: 20px;
        }

        &_div {
            float: right;
            margin-right: 50px;
        }
    }
  }
}


// 其他查询条件样式
.accept_more_operate {

  margin: -2px 24px;
  width: 97%;
  // height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;

  background: #FFFFFF;
  border: 1px solid #EEEEEE;

  &_left {
    display: block;
    // margin-left: 20px;
    // width: 100%;
    width: calc(100% - 220px);
    height: inherit;
    margin-right: auto;
    display: flex;

    flex-direction: column;
    align-content: center;
    justify-content: center;
    margin: 12px 12px;

  }

  &_right {
    display: block;
    float: right;
    margin-right: 20px;
    min-width: 200px;
    &_reset {
      width: 80px;
      margin-left: 20px;
    }
    &_submit {
      width: 80px;
    }
  }

  // 其他查询的条件样式修改
  &_moreForm {
    &_collapse {
      background-color: #FFFFFF;
      border: none;

      .ant-collapse-item {
        border-bottom: none;
      }
      .ant-collapse-content {
        border-top: none;
      }
      &_head {
        .ant-collapse-header {
          background-color: #fff;
        }
        .ant-form-item {
          margin-bottom: 0;
        }
      }

      &_body {
        padding-top: 10px;
        padding: 0 20px 0 0px;
      }
    } 

  }
}